import React, { useState, useEffect, useRef, useReducer } from 'react';
import socketReducer, { socketioState } from '@/client/reducer/socket';
import cs from './App.scss';
import Chat from '../lib/chat';

interface IAppProps {}
type IMessageData = {
    room: string;
    text: string;
};

function App(props: IAppProps) {
    // const [message, setMessage] = useState<string>('');
    const messageRef = useRef<HTMLDivElement>(null);
    const sendMessageInput = useRef<HTMLInputElement>(null);
    const [socketState] = useReducer(socketReducer, socketioState);
    const {current: chatApp} = useRef(new Chat(socketState.socket));

    useEffect(() => {
        console.log(socketState.socket);
        const messageDiv = messageRef.current;
        if (messageDiv) {
            socketState.socket.on('message', (data: IMessageData) => {
                console.log(data);
                const message = document.createElement('div');
                message.style.margin = '10px';
                message.innerHTML = `${data.text}`;
                messageDiv.appendChild(message);
                messageDiv.scrollTop = messageDiv.scrollHeight;
            });
        }

        socketioState.socket.on('joinResult', (data) => {
            // console.log('%c 🥑 data: ', 'font-size:12px;background-color: #ED9EC7;color:#fff;', data);
        })

        // 房间列表
        socketioState.socket.on('rooms', (data) => {
            console.log(data);
        });
        // 定期请求可用房间列表
        setInterval(() => {
            socketioState.socket.emit('rooms');
        }, 10000);
    }, []);
    const handleSendMessage = () => {
        if (sendMessageInput.current?.value) {
            const data: IMessageData = {
                text: sendMessageInput.current.value,
                room: 'Aaron'
            };
            const messageDiv = messageRef.current;
            const processCommand = chatApp.processCommand(sendMessageInput.current.value);
            if (typeof processCommand === 'boolean') {
            }else if (typeof processCommand === 'string') {
                if (messageDiv) {
                    const message = document.createElement('div');
                    message.style.textAlign = 'right';
                    message.style.margin = '10px';
                    message.innerHTML = `${data.text}`;
                    messageDiv.appendChild(message);
                    messageDiv.scrollTop = messageDiv.scrollHeight;
                }
                sendMessageInput.current.value = '';
                chatApp.sendMessage(data.room, data.text);
            }
        }
    };
    return (
        <div className={cs.content}>
            <div className={cs.roomList} />
            <div className={cs.main}>
                <div className={cs.message} ref={messageRef} />
                <div className={cs.sendWrap}>
                    <input
                        className={cs.sendInput}
                        ref={sendMessageInput}
                        onKeyDown={(e) => {
                            if (e.key === 'Enter') {
                                handleSendMessage();
                            }
                        }}
                    />
                    <button className={cs.sendBtn} onClick={handleSendMessage}>
                        发 送
                    </button>
                </div>
            </div>
        </div>
    );
}
export default App;
